<template>
  <view class="clientele-form">
    <navbar/>
    <u--form>
      <u-form-item ref="item1" label="姓名" border-bottom>
        <u--input v-model="clienteleInfo.name" placeholder="请输入姓名" border="none"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="头像" border-bottom>
        <upload-image v-model="clienteleInfo.avatar"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="性别" border-bottom>
        <radio-button v-model="clienteleInfo.sex" :list="dictList('sex')"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="手机" border-bottom>
        <u--input v-model="clienteleInfo.phone" placeholder="请输入手机号" border="none"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="年龄" border-bottom>
        <u--input v-model="clienteleInfo.age" placeholder="请输入年龄" border="none"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <u-form-item ref="item1" label="工作地点" border-bottom class="item_content from-content">
        <u--textarea
          v-model="clienteleInfo.address" maxlength="-1" height="80px" border="none"
          placeholder="请输入工作地点"/>
      </u-form-item>
      <u-gap height="1" bg-color="#bbb"/>
      <view style="margin:50px;">
        <u-button
          type="primary" shape="circle" size="large"
          @click="ClickRelease">发布
        </u-button>
      </view>
    </u--form>
    <u-toast ref="uToast"/>
  </view>
</template>

<script>
import { $_getClientAdd } from '@/api/clientele/clientele.js'
import UploadImage from '@/components/Upload/uploadImage'
import RadioButton from '@/components/RadioButton/RadioButton.vue'

export default {
  components: {
    RadioButton,
    UploadImage
  },
  data() {
    return {
      clienteleInfo: {
        name: '',
        avatar: '',
        sex: '',
        phone: '',
        age: '',
        address: ''
      }
    }
  },
  methods: {
    // 图片
    imgUrl(value) {
      if (value.length === 1) {
        const str = value.toString()
        console.log(str)
        this.clienteleInfo.avatar = str
      } else if (value.length > 1) {
        this.clienteleInfo.avatar = value.join(',')
      }
    },
    // 性别
    radioChange(value) {
      if (value === '男') {
        this.clienteleInfo.sex = '1'
      } else if (value === '女') {
        this.clienteleInfo.sex = '2'
      }
    },
    // 发布
    async ClickRelease() {
      console.log(this.clienteleInfo)
      const res = await $_getClientAdd(this.clienteleInfo)
      console.log(res)
      if (res.data.code === 0) {
        this.$refs.uToast.show({
          type: 'success',
          duration: '1000',
          message: res.data.msg,
          complete() {
            uni.navigateBack({
              delta: 1
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.clientele-form {
  width: 100%;
  height: 100%;

  ::v-deep.u-input {
    padding: 0 !important;
    box-sizing: border-box;

  }

  ::v-deep.u-input {
    border: none !important;
  }

::v-deep.u-textarea {
    padding: 2px 0 0 0 !important;
  }

  ::v-deep.u-form-item__body__left {
    align-items: flex-start !important;
    width: 80px !important;
  }

  ::v-deep.u-form-item__body__left__content {
    height: 24px !important;
  }
}
</style>
